<template>
  <div style="width:1200px;margin:0 auto">
    <el-row :gutter="20">
      <el-col :span="18">
        <el-card style="margin-bottom: 20px;height: 340px">
          <div style="border-bottom: #e9e9eb solid;padding-bottom: 20px;">
          <el-row>
            <el-col :span="6">
              <img :src="data.coverUrl" alt="" style="height: 236px;width:180px;">
            </el-col>
            <el-col :span="18">
              <div style="height:164px;">
                <p style="font-size: 18px;color: #666;font-weight: bold">
                  {{ data.title }}
                </p>
                <p style="font-size: 12px;color: #666">
                  {{data.author}}
                </p>
                <p style="font-size: 12px;color: #666">
                  {{data.commentCount}}条评价
                </p>
                <div style="height:66px;width: 100%">
                  <el-button type="info" plain style="width: 56px;height: 19px;padding: 2px 8px;"
                             v-for="(item,index) in keywords" :key="index">
                    {{item}}
                  </el-button>
                </div>
              </div>
              <div style="text-align: right">
                <el-button type="primary">立即购买</el-button>
              </div>
            </el-col>
          </el-row>
          </div>
          <div style="width: 695px;height: 55px;padding:15px 20px">
            <el-row :gutter="10">
              <el-col :span="8">
                <div>
                  <el-row>
                   <el-col :span="12">
                     <el-icon><Pointer /></el-icon>点赞 {{data.positiveCommentCount}}
                   </el-col>
                   <el-col :span="12">
                     <el-icon><Position /></el-icon>踩 {{data.negativeCommentCount}}
                   </el-col>
                  </el-row>
                </div>
              </el-col>
              <el-col :span="16"></el-col>
            </el-row>
          </div>
        </el-card>
        <el-card>


          <el-tabs v-model="activeName" class="demo-tabs">
            <el-tab-pane label="简介" name="first" style="font-size: 17px;line-height: 45px">
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{data.detail}}
            </el-tab-pane>
            <el-tab-pane label="目录" name="second">
              封面<br>
              版权<br>
              1<br>
              2<br>
              3<br>
              4<br>
              <div style="text-align: center">
                <el-button @click="more(2)">点击加载更多</el-button>
              </div></el-tab-pane>
          </el-tabs>

        </el-card>
        <!--    评论相关开始    -->
        <el-card style="margin-top: 20px">
          <div style="height: 22px;width: 850px">
            <span style="text-align: left;">评价</span>
            <span style="float: right;">去往评价列表</span>
          </div>
          <div style="height: 54px;width: 850px">
            <el-row :gutter="20">
              <el-col :span="4" style="font-size: 45px;padding-left: 20px">4.3</el-col>
              <el-col :span="6">
<!--                todo 星号评价-->
                <div style="width: 75px;height: 12px"><span style="margin: 8px 0 0;font-size: 12px;text-align: center">504条评价</span></div>
              </el-col>
              <el-col :span="14">
                <div style="float:right;">
                  <el-progress :percentage="10" status="success" style="width: 389px;height: 18px">
                    <span style="text-align: left;font-size: 10px">好评</span>
                  </el-progress>
                  <el-progress :percentage="50" status="warning" style="width: 389px;height: 18px">
                    <span style="text-align: left;font-size: 10px">中评</span>
                </el-progress>
                  <el-progress :percentage="40" status="exception" style="width: 389px;height: 18px">
                    <span style="text-align: left;font-size: 10px">差评</span>
                </el-progress>
                </div>
              </el-col>
            </el-row>
          </div>
          <hr>
          <el-row>
            <el-col :span="22">
              <el-input placeholder="请输入评论的内容..."></el-input>
            </el-col>
            <el-col :span="2">
              <el-button @click="postComment()">发布</el-button>
            </el-col>
          </el-row>
          <!--      评论列表    -->
          <el-row style="margin: 20px;">
            <el-col :span="2">
              <el-avatar src="https://pic1.zhimg.com/059e816149361d99c7fc6422e171c14f_xl.jpg"></el-avatar>
            </el-col>
            <el-col :span="22">
              <!--todo 评论内容填充处-->
            </el-col>
          </el-row>
        </el-card>
        <!--    评论相关结束    -->

      </el-col>
      <el-col :span="6">
        <!--作者其它文章开始-->
        <div style="background-color: white;">
          <div style="font-size: 17px; font-weight: bold;height: 35px;padding: 15px;line-height: 35px;border-bottom: 1px solid #e9e9eb">作者信息</div>
          <div style="font-size: 17px;height: 45px;line-height: 45px;padding: 15px;">
            {{ data.author }}
          </div>
          <el-row :gutter="20">
<!--            <el-col :span="4">-->
<!--              <img src="https://picx.zhimg.com/50/v2-beeba36f24b04afe3e3fd689f8bc5c78_qhd.jpg?source=f11ebe26"-->
<!--                   style="width: 38px;height: 38px">-->
<!--            </el-col>-->
<!--            <el-col :span="20">-->
<!--              <span style="text-align: center">东野圭吾</span>-->
<!--            </el-col>-->
          </el-row>
        </div>
        <!--作者其它文章结束-->
        <!--热门文章开始-->
        <el-card style="margin:10px 0">
          <h2>作者们的其他作品</h2>
          <hr>
          <el-row :gutter="20" v-for="i in 3">
            <el-col :span="8">
              <img src="https://pic1.zhimg.com/v2-d6167d260fbf758cc23b2d7f46137f94_200x0.jpg?source=f11ebe26"
                   style="width: 90px;height: 120px">
            </el-col>
            <el-col :span="16">
              <div style="width: 152px;height: 21px;margin-left: 14px">
                沉睡的人鱼之家
              </div>
              <div style="width: 152px;height: 72px;margin-left: 14px">
                很多时候,我们以为死亡是一个瞬间,其实死亡是一个过程.
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import {onMounted, ref} from "vue";

const activeName = ref('first')
const data=ref({
      "id": 22,
      "categoryId": 32,
      "categoryName": "技能习得",
      "barCode": "9761249a-8",
      "title": "中国的人口和城市",
      "brief": "chenqin，经济学研究者，高校教师，...",
      "coverUrl": "/2023/12/05/20231205203947.jpg",
      "author": "曾祥轩",
      "salePrice": 30.5,
      "keywords": "技能,学习,获得",
      "sort": 0,
      "isRecommend": 1,
      "checkState": 2,
      "isPutOn": 1,
      "detail": "chenqin，经济学研究者，高校教师，知乎 10 万人关注的「数据帝」。chenqin 自 2011 年加入知乎，三年来，他在「经济学」话题下回答了 37 个问题，成为最佳回答者。 计划生育起了什么作用？开放二胎会怎样？人口红利用完了吗？为何要延迟退休？户籍应当如何改革？哪些城市会成为鬼城？哪些城市会更加膨胀？……在知乎的三年，我的绝大部分回答，都在尝试使用数据和逻辑对这一系列和「人生」有关的问题做一个基本描述。在所有相关回答里，我挑选了最喜欢的 12 篇，构成了本书的所有篇章。——chenqin",
      "salesCount": 0,
      "commentCount": 0,
      "positiveCommentCount": 0,
      "negativeCommentCount": 0,
      "gmtCreate": "2023-11-25 15:12.30",
      "gmtModified": "2023-12-06 11:11.51"
    })
let keywords=ref();
const goodsUrl=ref('http://localhost:20800/kcircle/goods/findGoodsStandardById');

onMounted(()=>{
  let urlParams = new URLSearchParams(window.location.search);
  let id=urlParams.get('id');

  window.TokenAxios.get(goodsUrl.value+'?id='+id).then((response)=>{
    console.log(response.data.data);
    if (response.data.data!=null){
      data.value=response.data.data;
      keywords=ref(data.value.keywords.split(','));
    }
  }).catch(()=>{
    console.log("获取后端商品数据失败")
  })
})


</script>

<style scoped>
#head_div {
  height: 90px;
  background-image: url("/public/imgs/head1.jpg");
}

.title_p {
  height: 40px;
  overflow: hidden; /*超出不显示*/
  /*设置省略号相关样式*/
  display: -webkit-box;
  -webkit-line-clamp: 2; /*设置行数*/
  -webkit-box-orient: vertical; /*纵向*/
}

a {
  color: #333;
  text-decoration: none;
}

a:hover {
  color: orange;
}

.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}


</style>